<template>
  <div class="test">
    <el-row :gutter="20">
      <el-col :span="20" :offset="4">
        <div class="grid-content ep-bg-purple" />
        请输入摄像头的IP地址：
      </el-col>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="8" :offset="4">
        <div class="grid-content ep-bg-purple" />
        <el-input v-model="ipAddress"
          :pattern="'^(25[0-5]|2[0-4]\\d|[01]?\\d\\d?)\\.(25[0-5]|2[0-4]\\d|[01]?\\d\\d?)\\.(25[0-5]|2[0-4]\\d|[01]?\\d\\d?)\\.(25[0-5]|2[0-4]\\d|[01]?\\d\\d?)$'"
          placeholder="请输入 IP 地址" clearable :message="'请输入正确的 IP 地址'"></el-input>
      </el-col>
      <el-col :span="2" :offset="1">
        <div class="grid-content ep-bg-purple" />
        <el-button type="success" @click="connect" plain>测试连接</el-button>
      </el-col>
    </el-row>
  </div>
  <div class="status">
    <el-steps :space="200" :active="active" finish-status="success">
      <el-step title="发送连接请求" />
      <el-step title="正在尝试连接" />
      <el-step title="等待连接结果" />
    </el-steps>
  </div>
  <div class="result" v-if="isshow">
    <el-row>
      <el-col :sm="12" :lg="6">
        <el-result icon="success" title="连接成功" sub-title="恭喜你可以正常使用了！">
        </el-result>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>

</script>

<script>
import axios from "axios";
import { ref } from "vue";
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
let active = ref(0);

export default {
  data() {
    return {
      ipAddress: '',
      active,
      isshow: false
    };
  },
  computed: {
        ...mapState(['user'])
  },
  methods: {
    ...mapMutations(['setUserIP']),
    connect() {
      active.value++;
      console.log(this.user.username)
      this.$api.cameraApi.testLink(this.ipAddress,this.user.username)
        .then(res => {

          res = res.data
          console.log("---")
          console.log(res.code)
          if (res.code == 200) {
            this.setUserIP(this.ipAddress);
            this.isshow=true;
          } else {
            // 不成功，什么也不做哈哈
          }
        })
        .catch(err => {
          console.log("请求失败")
        })
      return {
        active
      }
    }
  }
};
</script>

<style scoped>
el-row {
  margin-bottom: 0;
}

el-row:last-child {
  margin-bottom: 0;
}

el-col {
  border-radius: 2px;
}

.grid-content {
  border-radius: 4px;
  min-height: 30px;
}

.test {
  width: 800px;
  margin-left: 200px;
  margin-top: 50px;
}

.status {
  margin-left: 300px;
  margin-top: 80px;
}

.result {
  margin-top: 10px;
  margin-left: 400px;
}
</style>